<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <!-- <div style="text-align; margin-bottom: 20px">
          <el-button type="primary" size="small" @click="hadd()"
            >新增</el-button
          >
        </div> -->
        <div style="color=#000;">分类名称</div>   
           <el-table
      :data="options"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
   
      :tree-props="{children: 'children'}">
      <el-table-column
        prop="name"
        label="商品分类"
        style="width: 80%">
    </el-table-column>

   
    <el-table-column label="操作" style="width: 50%">
        <template v-slot="{row}">
            <el-col v-if="row.top == true">
            <el-button class="operate" type="text" @click="hadds(row)"
                >添加子菜单</el-button
              >
            </el-col>
            <el-col v-else>

            <el-button class="operate" type="text" @click="heditss(row)"
                  >编辑</el-button
                >
                <el-button class="operate" type="text" @click="hdel(row.id)"
                  >删除</el-button
                >
            </el-col>
        </template>
    </el-table-column>
  </el-table>
      </el-card>

      <!-- 二级添加 -->
      <el-dialog
      :title="isEdit ? '编辑': '新增'"  
      :destroy-on-close='true' 
        :visible.sync="showDialogss"
        :close-on-click-modal="false"
        v-if="showDialogss"
      >
      <Subassembly @close='hClosed' :isEdit="isEdit" :childata='childata'></Subassembly>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import {classification,xdelete} from '@/api/user'
import arrayToTree from "array-to-tree";

import Subassembly from './components/subassembly.vue'
export default {
  components: { Subassembly },
  data() {
    return {
      isEdit:false,
      childata:{},
      options:[],
      showDialogss:false,

    };
  },
  created() {
    this.loacalsslist();

    // this.loarelist()
  },
  // mounted(){
  // this.reverl()
  // },
  methods: {

    // 一级分类
   async loacalsslist() {
      const res = await classification()
           for(let i = 0; i < res.data.length; i++){
    this.options.push({
      name:res.data[i].name,
      id:res.data[i].id,
      parentId:res.data[i].parentId,
      top:res.data[i].top,
      iconUrl:res.data[i].iconUrl
    })
   }
   const treedata = arrayToTree(res.data,{
      parentProperty:"parentId",
      customID:"id"
   })
  this.options = treedata
    

    },
    // 添加一级分类

    hadds(row) {
      this.showDialogss = true;
      this.isEdit = false;
      this.childata = row
    },
    // 取消确定
    hClosed(){
      this.showDialogss = false;
       this.loacalsslist();
    },
    // 编辑
    heditss(row){
 this.showDialogss = true;
      this.isEdit = true;
   this.childata = row

    },
    // 删除
    hdel(id){
      console.log(id);
          this.$confirm("你确定要删除吗？")
        .then(() => {
          this.doDel(id);
        })
        .catch(() => {});
    },
    async doDel(id) {
      try {
         const params = new URLSearchParams(); // 创建URLSearchParams数据对象
          params.append("id",id); //
        const res = await xdelete(params);
        this.$message.success(res.msg);
        this.loacalsslist();
      } catch (e) {
        this.$message.error(e.msg);
      }
    }
  },
};
</script>

<style scoped>
.operate {
  color: #ff7144;
}
.el-dialog {
  margin: 0 auto;
}
.el-button--primary {
  border: 1px solid #ff7144;
}
::v-deep .el-table_2_column_3 {
  width: 80% !important;
}
.aaa{
  margin-left: 20px;
}
</style>
